<template lang="pug">
  .clearfix
    Modal(
      width="480"
      v-model="isShowExportModal"
      title="导出明细"
      class-name="vertical-center-modal"
    )
      .search-form
        Form.ivu-row.has-rules-item2(ref="formData" :model="formData" :rules="rules" :label-width="100")
          FormItem.form-item.ivu-col.pr-20(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled")
            //- template(v-if="item.type === 'select'")
            //-   Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable multiple :max-tag-count="2")
            //-     Option(
            //-       v-for="(c_item, index) in arrListDown[item.options]"
            //-       :value="c_item.value"
            //-       :key="index"
            //-     ) {{ c_item.label }}
            template(v-if="item.type === 'datePicker'")
              DatePicker.w-100(v-model="formData[item.model]" placeholder="请选择" type="month" format="yyyy-MM")
        .text-gray-9.pl-120.relative.top-10-fu 编号用空格分开

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定
</template>

<script>
import { FinanceSSPayableApi } from '@/api/FinanceSSPayable.api.js'
import { Common } from '@/utils/common.js'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')
export default {
  name: '',

  props: {
  },

  computed: {
  },

  components: {
  },

  data () {  
    return {
      isShowExportModal: false,
      formData: {
        feeYM: '',
        socialSecurityNo: ''
      },
      formItem: [
        { type: 'datePicker', label: '费用月份：', placeholder: '请选择费用月份', prop: 'feeYM', model: 'feeYM', style: 'ivu-col-span-24 is-required' },
        { type: 'input', label: '社保编号：', placeholder: '请输入社保编号', prop: 'socialSecurityNo', model: 'socialSecurityNo', style: 'ivu-col-span-24 is-required', options: 'securityNos' }
      ],
      rules: {
        feeYM: [
          { required: true, message: '请选择费用月份' }
        ],
        socialSecurityNo: [
          { required: true, message: '请输入社保编号' }
        ],
      },
      arrListDown: {
        securityNos: []
      },
      isCanSubmit: true
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowExportModal = false
    },

    show () {
      this.$refs.formData.resetFields()
      this.isCanSubmit = true
      this.isShowExportModal = true
    },
    
    handleSubmit () {
      console.log('this.formData: ', this.formData)
      this.isCanSubmit = false
      this.$refs.formData.validate((valid) => {
        if (valid) {
          console.log('ok')
          var params = {            
            Year: this.$moment(this.formData.feeYM).format('YYYY'),
            Month: this.$moment(this.formData.feeYM).format('MM'),
            SocialSecurityNo: this.formData.socialSecurityNo
          }
          console.log('params: ', params)
          // this.$emit('exportPayableDetail', params)
          FinanceSSPayableApi.exportPayableDetail(params).then(res => {
            console.log('导出明细res: ', res)
            if (res.status === 200 && res.data.success) {
              console.log('❤ 返回链接: ', baseUrl + res.data.message)
              window.open(baseUrl + res.data.message, '_blank')
              this.isShowExportModal = false
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
              this.isCanSubmit = true
            }
          })
        } else {
          this.isCanSubmit = true
        }
      })
    }
  }
}
</script>

<style lang="less" scope>
</style>
